$(function(){
	
// 模拟数据，以及插入数据
	//data
		var musList = [
			{
				voiceid:0,
				url: 'http:\/\/cdnergebd.shoujiduoduo.com\/user_audio\/56\/user_2157830_1523707996056.mp3',
				title_name:'小猪佩奇',
				numPeople:231,
				timeLong:625
			},
			{
				voiceid:1,
				url: 'http:\/\/cdnergebd.shoujiduoduo.com\/user_audio\/73\/user_1359240_1520431127073_vn.mp3',
				title_name:'橘子老虎',
				numPeople:298,
				timeLong:132
			},
			{
				voiceid:2,
				url: 'http:\/\/cdnergebd.shoujiduoduo.com\/user_audio\/63\/user_2157830_1522632526063.mp3',
				title_name:'茜茜妈妈',
				numPeople:890,
				timeLong:354
			},
			{
				voiceid:3,
				url: 'http:\/\/cdnergebd.shoujiduoduo.com\/user_audio\/56\/user_2157830_1523707996056.mp3',
				title_name:'才发现',
				numPeople:870,
				timeLong:214
			},
			{
				voiceid:4,
				url: 'http:\/\/cdnergebd.shoujiduoduo.com\/user_audio\/56\/user_2157830_1523707996056.mp3',
				title_name:'俺的沙发',
				numPeople:670,
				timeLong:791
			},
			{
				voiceid:5,
				url: 'http:\/\/cdnergebd.shoujiduoduo.com\/user_audio\/63\/user_2157830_1522632526063.mp3',
				title_name:'发是的发生的',
				numPeople:277,
				timeLong:365
			}
		]//模拟音乐列表
		var musicId = 0 //音乐列表中位置 （播放）
		var timer = null //开启计时器
		var musicDuration = 0//进度条 总时长
		var musicCurrentTime = 0//进度条 当前时长
		var videoId = document.querySelector('#videoId')//音乐播放标签id
		var music_next = $('#music_next')//播放下一首
		var	music_last = $('#music_last')//播放上一首
		var	music_play = $('#music_play')//播放
		var	music_stop = $('#music_stop')//暂停
		var CurrentTime = $('#CurrentTime')//当前时长
		var Duration = $('#Duration')//总时长
	//data End
	//封装方法
		//Dom list 插入 num 当前点击的样式
		function musicList_initialize(num){
			var musicList_children = ''
			var musicList_child = ''
			for (var i = 0; i < musList.length; i++) {
				if(i == num){
					earPeople(musList[i].numPeople);
					musicList_child = `<div class="musicItem" >
						<div class="ml">
							<div class="topMAct">
								${musList[i].title_name}
							</div>
							<div class="botM">
								<img src="./thisP/image/classcontent_icon_time@2x.png" alt="">
								<span>${musList[i].numPeople}</span>
								<img src="./thisP/image/classcontent_icon_listen@2x.png" alt="">
								<span>${numToTime(musList[i].timeLong)}</span>
							</div>
						</div>
						<img class="mr" src="./thisP/image/content_btn_motion_small@2x.png" >
					</div>`;
				}else{
					musicList_child = `<div class="musicItem" >
						<div class="ml">
							<div >
								${musList[i].title_name}
							</div>
							<div class="botM">
								<img src="./thisP/image/classcontent_icon_time@2x.png" alt="">
								<span>${musList[i].numPeople}</span>
								<img src="./thisP/image/classcontent_icon_listen@2x.png" alt="">
								<span>${numToTime(musList[i].timeLong)}</span>
							</div>
						</div>
						<img class="mr" src="./thisP/image/content_btn_play_small@2x.png" >
					</div>`;
				}
				musicList_children += musicList_child;
			}
			$('.musicList').html(musicList_children);
			var musicItem = $('.musicItem')//列表
			musicItem.each(function(i){
				$(this).on('click',function(){
					musicId = i;
					musicList_initialize(musicId);
					playerStart(musicId)
			})
		});
		}
		musicList_initialize(musicId); //播放列表初始化。
		//模拟听者数量
		function earPeople(num){
			$('#earPeople').html(num);
		}
		//模拟title
		function earTitle(str){
			$('.title').html(str);
		}
		earTitle('如何运用占星来谈一段好感情');
		//初始化播放器
		function playerStart(num){
			videoId.src = musList[num].url;
			videoId.play();
		}
		playerStart(musicId)

		//前后切换 {up:上一首,down:下一首}
		function cutMusicPlayer(cutStatus){
			if(cutStatus == 'up'){
				musicId--; 
				if(musicId < 0){
					musicId = musList.length-1;
				} 
			}else{
				musicId++; 
				if(musicId >= musList.length){
					musicId = 0;
				} 
			}
			videoId.src = musList[musicId].url;
		    videoId.play();
		}
		//时间格式化
		function numToTime(num){
			var minuteTime = parseInt(num/60)>=10 ? parseInt(num/60) : '0' + parseInt(num/60);
			var secondTime = parseInt(num%60)>=10 ? parseInt(num%60) : '0' + parseInt(num%60);
			return minuteTime+':'+secondTime
		}
	//封装方法end
	playerStart(musicId);//初始化播放器
	//播放下一首
	music_next.click(function(){
		cutMusicPlayer('down')
		music_stop.attr('class','playStatus');
		music_play.attr('class','playStatus playSAct');
		musicList_initialize(musicId);
	});
	//播放上一首
	music_last.click(function(){
		cutMusicPlayer('up')
		music_stop.attr('class','playStatus');
		music_play.attr('class','playStatus playSAct');
		musicList_initialize(musicId);
	});
	//播放
	music_play.click(function(){
		
		videoId.pause()
		music_play.attr('class','playStatus');
		music_stop.attr('class','playStatus playSAct');
	})
	//暂停
	music_stop.click(function(){
		videoId.play()
		music_stop.attr('class','playStatus');
		music_play.attr('class','playStatus playSAct');
	})
	//播放video 进度条
	videoId.onplaying = function(){
		var widthPercent = 0;
		musicDuration = parseInt(videoId.duration)//总时长
		musicCurrentTime = parseInt(videoId.currentTime)//当前时长

		Duration.html(numToTime(musicDuration));
		CurrentTime.html(numToTime(musicCurrentTime));

		widthPercent = parseFloat(musicCurrentTime/musicDuration)*100;
		var widthPercentStr = 'width:'+widthPercent+'%;'
		$('.progress').attr('style',widthPercentStr);
	}
	setInterval(videoId.onplaying,1000)//获取当前播放时长，以及总时长
	//播放video 进度条End
	//列表访问
})
